import { Input, NavBar, TextArea } from "antd-mobile";
import { useEffect, useState } from "react";
import styles from "./index.module.scss";
type Props = {
    onClose: () => void;
    value: string;
    type: "" | "name" | "intro";
    onUpdateProfile: (type: "name" | "intro", value: string) => void;
};
const EditInput = ({ onClose, value, onUpdateProfile, type }: Props) => {
    // useState 的默认值，只会在组件第一次渲染时生效
    const [inputValue, setInputValue] = useState(value);
    useEffect(() => {
        setInputValue(value ?? "");
    }, [value]);
    const isEditName = type === "name";
    // 提交
    const onSave = () => {
        // 通过该判断，去掉 type 属性中的 '' 类型，解决类型不一致的问题
        if (type === "") return;
        onUpdateProfile(type, inputValue);
    };
    return (
        <div className={styles.root}>
            <NavBar
                className="navbar"
                onBack={onClose}
                right={
                    <span className="commit-btn" onClick={onSave}>
                        提交
                    </span>
                }>
                编辑{isEditName ? "昵称" : "简介"}
            </NavBar>

            <div className="edit-input-content">
                <h3>{isEditName ? "昵称" : "简介"}</h3>

                {isEditName ? (
                    <div className="input-wrap">
                        <Input
                            placeholder="请输入"
                            value={inputValue}
                            // onChange={setInputValue}
                            onChange={(e) => setInputValue(e)}
                        />
                    </div>
                ) : (
                    <TextArea
                        className="textarea"
                        placeholder="请输入"
                        // 展示：右下角的字数统计
                        showCount
                        // 指定内容最大长度
                        maxLength={100}
                        // 指定 文本域 展示内容的行数（文本域高度）
                        rows={4}
                        value={inputValue}
                        onChange={setInputValue}
                    />
                )}
            </div>
        </div>
    );
};

export default EditInput;
